<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-18 
 -->


<template>
  <div class="swiperBg" :style="{ backgroundColor: data.bgColor }"></div>
  <a-carousel arrows autoplay :before-change="changeFunc">
    <template #prevArrow>
      <div class="custom-slick-arrow left-2.5 z-[1]">
        <left-circle-outlined />
      </div>
    </template>
    <template #nextArrow>
      <div class="custom-slick-arrow right-2.5">
        <right-circle-outlined />
      </div>
    </template>
    <div class="swiper-item" v-for="item,i in props.banner">
      <div class="swiper-box">
        <div class="swiper-left">
          <h3 :style="{ color: item.text_color }">{{ item.desktop_sub_title || item.sub_title }}</h3>
          <h1 :style="{ color: item.text_color }">{{ item.desktop_title || item.title }}</h1>
        </div>
        <div class="banner-right">
          <img
            :src="`https://pixl.decathlon.com.cn/${item.picture_desktop}/banner.jpg`"
            alt="item.title"
          />
        </div>
      </div>
    </div>
  </a-carousel>
</template>

<script setup>
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { reactive, defineProps } from 'vue';
const props = defineProps({ banner: Array });
const data = reactive({
  bgColor: props.banner[0].bg_color
})
function changeFunc(from, to) {
  data.bgColor = props.banner[to].bg_color;
}
</script>

<style lang='scss' scoped>
.ant-carousel :deep(.slick-slide) {
  @apply text-center h-[575px] leading-[160px] overflow-hidden;
}
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  background-color: rgba(31, 45, 61, 0.11);
  @apply w-6 h-6 text-2xl text-white opacity-30 z-[1];
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  @apply hidden;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  @apply opacity-50;
}
.ant-carousel :deep(.slick-slide h3) {
  @apply text-white;
}
.swiperBg {
  @apply absolute block w-full h-[575px] transform skew-y-[-8deg] transition-all duration-500 origin-top-left;
}
.swiper-item {
  @apply h-[575px];
  .swiper-box {
    @apply flex min-w-[1200px] justify-center;
    .swiper-left {
      @apply text-left w-[340px] pr-[100px] flex flex-col items-start mt-[100px];
      h3 {
        @apply text-3xl font-black m-0 leading-[100px];
      }
      h1 {
        @apply text-5xl font-black m-0;
      }
    }
    .banner-right {
      @apply mt-11 origin-top-left transform skew-y-[-8deg] overflow-hidden rounded-3xl rounded-br-[80px];
      img {
        @apply origin-top-left transform skew-y-[8deg] rounded-3xl;
      }
    }
  }
}
</style>
